<html>
<head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <#assign base=request.contextPath  />
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/frame/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${base}/sweep/css/app.css" media="all">
    <link rel="stylesheet" href="${base}/sweep/css/mui.min.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/sweep/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/backstage/css/lunBo.css"/>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js"></script>
    <script src="${base}/sweep/js/mui.min.js"></script>
    <script src="${base}/backstage/layui/layui.js"></script>
    <style>
        /*背景层*/
        #popLayer {
            display: none;
            /*遮罩层*/
            /*background-color: #B3B3B3;*/
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=80); /* 只支持IE6、7、8、9 */
        }

        /*弹出层*/
        #popBox {
            display: none;
            background-color: #FFFFFF;
            z-index: 11;
            width: 100%;
            height: 76%;
            position: fixed;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
        }

        #popBox .close {
            text-align: right;
            margin-right: 5px;
            /*background-color: #F8F8F8;*/
        }

        /*关闭按钮*/
        #popBox .close a {
            text-decoration: none;
            color: #2D2C3B;
        }

        .layui-unselect .layui-form-radio {
            /*text-indent: 50px;*/
            height: 4rem;
            /*font-size: 0.5rem;*/
            padding: 0.5rem;
            /*line-height: 1rem;*/
        }
    </style>
</head>
<body>
<div class="mui-content">
    <form class="layui-form">
    <!--商品轮播图-->
    <#--    <div id="slider" class="mui-slider" >-->
    <#--        <div class="mui-slider-group mui-slider-loop">-->
    <#--            <#list goodImages as goodImages>-->
    <#--                <div class="mui-slider-item ">-->
    <#--                    <a href="#">-->
    <#--                        <img src="${goodImages.url}">-->
    <#--                    </a>-->
    <#--                </div>-->
    <#--            </#list>-->
    <#--        </div>-->
    <#--    </div>-->

    <div class="box">
        <div class="box-1">
            <ul>
                <#list goodImages as goodImages>
                    <li>
                        <img src="${goodImages.url}"/>
                    </li>
                </#list>
            </ul>
        </div>
        <div class="box-2">
            <ul>

            </ul>
        </div>
        <div class="box-3">
            <span class="prev"> < </span>
            <span class="next"> > </span>
        </div>
    </div>

    <!--价格部分-->
    <div style="position: relative;bottom: 16px;background: #fff">
        <br>
        <p style="margin-top: 10px;">
            <span><span style="color: red;font-size: 20px;    margin-left: 6%;">￥${good.goodPrice}</span> /赚￥${good.saleProfit}</span>
        </p>
        <p>
        <p style="margin-left: 6%;">${good.goodName}</p>
        </p>
        <p style="height: 6%">

            <span onclick="showWindow()" style="margin-left: 6%;">选择规格<span style="float: right;margin-right: 10px;color: red">></span></span>
            <!-- 遮罩层  showWindow -->
        <div id="cover"
             style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 ">

        </div>
        <!-- 弹窗 -->
        <div id="showdiv"
             style="width: 100%; margin: 0 auto; height: 76%; border: 1px solid #999; display: none;position: fixed;bottom: 0;  z-index: 3; background: #fff">
            <!-- 标题 -->
            <div onclick="closeWindow()"
                 style="background: #F8F7F7; width: 100%; height: 2rem;  line-height: 2rem;  text-align: center;float: right">
                <span style="float: right;font-size: 15px;">关闭</span>
            </div>
            <!-- 内容 -->
            <div style=" height: 4rem; font-size: 0.5rem; padding: 0.5rem; line-height: 1rem; ">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell mui-media">
                        <a href="javascript:;">
                            <img class="mui-media-object mui-pull-left" src="${imageOne}">
                            <span style="font-size: 15px;color: red">￥&nbsp;${good.goodPrice}</span>
                            <p class='mui-ellipsis'>库存99999件</p>
                            <p class='mui-ellipsis'>选择颜色分类,尺码</p>
                        </a>
                    </li>
                </ul>
                <div style="margin-top: 10px;">
                    <p>颜色分类</p>
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <div id="www">
                                <#list goodSizes as goodSizes>
                                    <input type="radio" name="color" value="${goodSizes.color}"
                                           title="${goodSizes.color}">
                                </#list>
                            </div>

                        </div>

                </div>
                <div style="margin-top: 10px;">
                    <p>尺码</p>

                        <div class="layui-form-item">
                            <#list goodSizes as goodSizes>
                                <input type="radio" name="size" value="${goodSizes.sizeId}" title="${goodSizes.sizeId}">
                            </#list>
                        </div>
                    </form>

                </div>
                <div style="margin-top: 10px;">
                    <span style="font-size: 15px;position: relative;top:10px;">购买数量</span>
                    <span style="float: right">
                        <button type="button" onclick="jian()">-</button>
                        <button type="button" id="num" value="1" type="button">1</button>
                        <button type="button" onclick="jia()">+</button>
                    </span>
                </div>
                <div style="margin-top: 45%;">
                    <p style="color: red;font-size: 18px;">￥ <span id="price">${good.goodPrice}</span></p>
                </div>
<#--                <button style="position: fixed;bottom: 10px;width: 40%;background: #f0ad4e" onclick="shoppingCar()">加入购物车</button>-->
                <button type="button" style="position: fixed;bottom: 10px;margin-left: 50%;width: 40%;background: #009f95"
                        onclick="goumai()">立即购买
                </button>
            </div>

        </div>


        </p>
    </div>
    <!--评论-->
    <div id="ping">
        <p id="re">宝贝评论<span style="float: right;color: #df5000;margin-right: 4%;">全部评论>>> </span></p>
        <ul class="mui-table-view">
            <#if size==0>
                <li class="mui-table-view-cell mui-media">
                    <a href="javascript:;">
                        <div class="mui-media-body" style="text-align: -webkit-center;">
                            <span style="font-size: 15px;text-align: center">暂无评论</span>
                        </div>
                    </a>
                </li>
            </#if>
            <#if size==1>
                <li class="mui-table-view-cell mui-media">
                    <a href="javascript:;">
                        <div class="mui-media-body">
                            <span style="font-size: 13px;">${comment.stringPhone}</span>
                            <p class='mui-ellipsis'>${comment.comment}</p>
                        </div>
                    </a>
                </li>
            </#if>

        </ul>
    </div>


    <div style="width: 100%">
        <p style="text-align: center;background: #fff;display: table-cell;vertical-align: middle;height:42px;width: 373px;position: relative;bottom:6px;">
            --- 商 品 详 情 ---</p>
    </div>
    <div style="    margin-bottom: 20%;">
        <#list goodDetails as goodDetails>
            <img src="${goodDetails.url}" style="height: 400px;width: 100%">
        </#list>
    </div>


</div>
<div class="mui-content" style="position: fixed;bottom: 0px;width: 100%;height:55px;border: 1px solid #fff">
<#--    <div id="div">-->
<#--        <span class="mui-icon mui-icon-chatbubble" id="icon" style="position: relative;left: 5px;"></span><br>-->
<#--        <span style="font-size: 12px;">客服</span>-->
<#--    </div>-->
<#--    <div id="div">-->
<#--        <span class="mui-icon mui-icon-plus" id="icon" style="position: relative;left: 6px;"></span><br>-->
<#--        <span style="font-size: 12px;">上架</span>-->
<#--    </div>-->
<#--    <div id="div" onclick="shoppingCar()">-->
<#--        <span class="mui-icon mui-icon-compose" id="icon" style="position: relative;left: 10px;"></span><br>-->
<#--        <span style="font-size: 12px;" >购物袋</span>-->
<#--    </div>-->
    <div style="height: 55px;">
        <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="button"
                style="background: darkred;width: 70%" onclick="shoppingCar()">加入购物车
        </button>
<#--        <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="button" style="background: red;">-->
<#--            分享商品-->
<#--        </button>-->
    </div>
    </form>
</div>

</body>
<script src="${base}/backstage/js/lunBo.js"></script>
<script>
    layui.use(['form', 'layer', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , $ = layui.jquery
            , upload = layui.upload;


    })

</script>
<script>

    function bodyScroll(event) {
        event.preventDefault();
    }

    // 弹窗
    function showWindow() {
        $('#showdiv').show();  //显示弹窗
        // $('#cover').css('display','block'); //显示遮罩层
        // $('#cover').css('height',document.body.clientHeight+'px'); //设置遮罩层的高度为当前页面高度
        document.body.addEventListener('touchmove', bodyScroll, false);
        $('body').css({'position': 'fixed', "width": "100%"});
        //根据商品id查询弹框信息
    }

    // 关闭弹窗
    function closeWindow() {
        $('#showdiv').hide();  //隐藏弹窗
        // $('#cover').css('display','none');   //显示遮罩层
        document.body.removeEventListener('touchmove', bodyScroll, false);
        $("body").css({"position": "initial", "height": "auto"});
    }

    //数量加
    function jia() {
        //获取数量的值
        var value1 = document.getElementById('num').value;

        var nn = Number(value1) + Number(1);
        document.getElementById('num').value = nn
        document.getElementById('num').innerHTML = nn
        var a = parseFloat('${good.goodPrice}') * parseFloat(nn)
        document.getElementById('price').innerHTML = a.toFixed(2)
    }

    //数量减
    function jian() {
        var value1 = document.getElementById('num').value;
        if (value1 != 1) {
            //获取数量的值
            var nn = Number(value1) - Number(1);
            document.getElementById('num').value = nn
            document.getElementById('num').innerHTML = nn
            var vv = $("#price").html();
            var a = parseFloat(vv) - parseFloat('${good.goodPrice}')
            document.getElementById('price').innerHTML = a.toFixed(2)
        }

    }

    //购买
    function goumai() {
      var color = $('input[name="color"]:checked').val();
      var size = $('input[name="size"]:checked').val();
      if(color==undefined){
          mui.alert("请选择颜色")
          return;
      }

      if(size==undefined){
          mui.alert("请选择规格")
          return;
      }
        var jsonDate = {
            goodId:'${good.id}',
            price:'${good.goodPrice}',
            color:color,
            size:size,
            sum:document.getElementById('num').value,
            sumPrice:document.getElementById('price').innerHTML
        }
        $.ajax({
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            url: "${base}/wx/shoppingOrder/saveOrder",
            data: JSON.stringify(jsonDate),
            success: function (data) {
                if (data.code === 200) {
                    layer.msg("下单成功")
                    window.location.href = "${base}/wx/good/goodDetails.html?id="+'${good.id}'
                } else {
                    layer.msg(data.msg)
                }
            }
        });
    }

    //加入购物车
    function shoppingCar() {
        var jsonDate = {
            openid:'${user.openid}',
            goodId:'${good.id}'
        }
        $.ajax({
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            url: "${base}/wx/shoppingCar/saveShoppingCar",
            data: JSON.stringify(jsonDate),
            success: function (data) {
                if (data.code === 200) {
                    layer.msg("加入成功")
                    window.location.href = "${base}/wx/good/goodDetails.html?id="+'${good.id}'
                } else {
                    layer.msg(data.msg)
                }
            }
        });
    }
</script>
</html>


